<span page-title ng-model="version">{{ "Remove Version" | translate }} {{ version.version }}</span>

<section>
  <h3 translate>Activation Keys using Version {{ version.version }}</h3>

  <p translate>
    The Activation Keys listed below are currently using this Content View Version.  Before deleting the Version you must move these Activation Keys to a Lifecycle Environment where this Version is not in use.
  </p>

  <p translate>
     If you would prefer to move portions of these Activation Keys to different Content Views or Lifecycle Environments click <a href="{{ activationKeyLink() }}">here</a> to manage them individually.
  </p>


  <p translate>
    <span translate>
      If you would prefer to move portions of these Activation Keys to different content views or Lifecycle Environments click
    </span>
    <a ui-sref="activation-keys" translate >here</a>
    <span translate>to manage them individually.</span>
  </p>

  <p translate>
    Please select a Lifecycle Environment and Content View to move the affected Activation Keys to:
  </p>

  <div path-selector="environments"
       ng-model="selectedEnvironment"
       mode="singleSelect"></div>

  <div class="row">
    <div class="col-sm-4">
      <span translate>Content View:</span>
      <select class="form-control" ng-show="!fetchingViews && selectedEnvironment && contentViewsForEnvironment.length > 0"
              ng-options="cv.id as cv.name for cv in contentViewsForEnvironment"
              ng-model="selectedContentViewId">
      </select>
      <i ng-show="fetchingViews" class="fa fa-spinner fa-spin"></i>
      <span translate ng-hide="selectedEnvironment">
        Please select a Lifecycle Environment.
      </span>
      <span translate ng-show="!fetchingViews && selectedEnvironment && contentViewsForEnvironment.length === 0">
        No Content Views available, please select another environment.
      </span>
    </div>
  </div>

  <a ng-click="toggleKeys()">
    <p ng-show="!showKeys" translate>Show affected Activation Keys</p>
    <p ng-show="showKeys" translate>Hide affected Activation Keys</p>
  </a>

  <div ng-show="showKeys">
    <div data-extend-template="layouts/partials/table.html">
      <h5 translate>Affected Activation Keys</h5>

      <div data-block="selection-summary"></div>

      <table data-block="table" class="table table-striped table-bordered">
        <thead>
          <tr bst-table-head>
            <th bst-table-column="name"><span translate>Name</span></th>
            <th bst-table-column="environment.name"><span translate>Lifecycle Environments</span></th>
          </tr>
        </thead>

        <tbody>
          <tr bst-table-row ng-repeat="key in table.rows">
            <td bst-table-cell>
                {{ key.name }}
            </td>
            <td bst-table-cell>
                {{ key.environment.name }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="pull-right">
    <a ui-sref="content-view.versions({contentViewId: contentView.id})" >
      <button type="button" class="btn btn-default" translate>
        Cancel
      </button>
    </a>
    <button type="button" class="btn btn-default" ng-click="transitionBack()" translate>
      Back
    </button>
    <button type="button" class="btn btn-primary" ng-click="processSelection()" ng-disabled="selectedContentViewId === undefined" translate>
      Next
    </button>
  </div>
</section>
